<template>
    <div class="min-h-screen bg-gray-50 font-sans">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-md fixed w-full top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
          <div class="flex items-center">
            <i class="fa fa-bolt text-primary text-2xl mr-2"></i>
            <h1 class="text-xl font-bold text-dark">校园跑腿</h1>
          </div>
  
          <!-- 桌面端导航 -->
          <div class="hidden md:flex items-center space-x-6">
            <a 
              href="#tasks" 
              class="text-gray-600 hover:text-primary transition"
              @click.prevent="scrollToSection('tasks')"
            >
              任务列表
            </a>
            <a 
              href="#in-progress" 
              class="text-gray-600 hover:text-primary transition"
              @click.prevent="scrollToSection('in-progress')"
            >
              进行中
            </a>
            <a 
              href="#completed" 
              class="text-gray-600 hover:text-primary transition"
              @click.prevent="scrollToSection('completed')"
            >
              已完成
            </a>
            <a 
              href="#earnings" 
              class="text-gray-600 hover:text-primary transition"
              @click.prevent="scrollToSection('earnings')"
            >
              收益
            </a>
          </div>
  
          <div class="flex items-center space-x-4">
            <!-- 通知按钮 -->
            <button class="relative text-gray-600 hover:text-primary">
              <i class="fa fa-bell text-xl"></i>
              <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
            </button>
  
            <!-- 用户头像与下拉菜单 -->
            <div class="relative">
              <button 
                class="flex items-center focus:outline-none" 
                @click="toggleProfileMenu"
              >
                <img 
                  src="https://picsum.photos/id/64/40/40" 
                  alt="用户头像" 
                  class="h-8 w-8 rounded-full object-cover"
                >
                <span class="ml-2 hidden md:inline text-gray-700">张跑腿</span>
                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500"></i>
              </button>
              
              <!-- 下拉菜单 -->
              <div 
                class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden"
                :class="{ hidden: !showProfileMenu }"
              >
                <a href="#profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                <a href="#settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                <a href="#logout" class="block px-4 py-2 text-sm text-danger hover:bg-gray-100">退出登录</a>
              </div>
            </div>
  
            <!-- 移动端菜单按钮 -->
            <button 
              class="md:hidden text-gray-600" 
              @click="toggleMobileMenu"
            >
              <i class="fa fa-bars text-xl"></i>
            </button>
          </div>
        </div>
  
        <!-- 移动端菜单 -->
        <div 
          class="md:hidden bg-white border-t"
          :class="{ hidden: !showMobileMenu }"
        >
          <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
            <a 
              href="#tasks" 
              class="py-2 text-gray-600 hover:text-primary transition"
              @click.prevent="handleMobileNavClick('tasks')"
            >
              任务列表
            </a>
            <a 
              href="#in-progress" 
              class="py-2 text-gray-600 hover:text-primary transition"
              @click.prevent="handleMobileNavClick('in-progress')"
            >
              进行中
            </a>
            <a 
              href="#completed" 
              class="py-2 text-gray-600 hover:text-primary transition"
              @click.prevent="handleMobileNavClick('completed')"
            >
              已完成
            </a>
            <a 
              href="#earnings" 
              class="py-2 text-gray-600 hover:text-primary transition"
              @click.prevent="handleMobileNavClick('earnings')"
            >
              收益
            </a>
          </div>
        </div>
      </header>
  
      <!-- 主内容区 -->
      <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 任务列表区域 -->
        <section id="tasks" class="mb-12">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-dark">附近的任务</h2>
            <div class="flex items-center">
              <button class="bg-primary text-white px-4 py-2 rounded-lg btn-hover mr-2">
                <i class="fa fa-refresh mr-1"></i> 刷新
              </button>
              <button 
                class="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg btn-hover" 
                @click="toggleFilterPanel"
              >
                <i class="fa fa-filter mr-1"></i> 筛选
              </button>
            </div>
          </div>
  
          <!-- 筛选面板 -->
          <div 
            class="bg-white rounded-lg p-4 mb-6"
            :class="{ hidden: !showFilterPanel }"
          >
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">任务类型</label>
                <select class="w-full p-2 border border-gray-300 rounded-md" v-model="filter.taskType">
                  <option value="">全部类型</option>
                  <option value="food">美食外卖</option>
                  <option value="express">快递代取</option>
                  <option value="shopping">代购商品</option>
                  <option value="other">其他任务</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">距离范围</label>
                <select class="w-full p-2 border border-gray-300 rounded-md" v-model="filter.distance">
                  <option value="">不限</option>
                  <option value="1">1公里内</option>
                  <option value="3">3公里内</option>
                  <option value="5">5公里内</option>
                  <option value="10">10公里内</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">报酬排序</label>
                <select class="w-full p-2 border border-gray-300 rounded-md" v-model="filter.sortBy">
                  <option value="default">默认排序</option>
                  <option value="high">从高到低</option>
                  <option value="low">从低到高</option>
                </select>
              </div>
            </div>
            <div class="flex justify-end mt-4">
              <button 
                class="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg mr-2 btn-hover"
                @click="resetFilter"
              >
                重置
              </button>
              <button class="bg-primary text-white px-4 py-2 rounded-lg btn-hover">
                应用筛选
              </button>
            </div>
          </div>
  
          <!-- 任务列表 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 任务卡片循环渲染 -->
            <div 
              class="bg-white rounded-lg overflow-hidden card-shadow hover:shadow-lg transition"
              v-for="task in tasks"
              :key="task.id"
            >
              <div class="p-5">
                <div class="flex justify-between items-start mb-3">
                  <span 
                    class="text-xs px-2 py-1 rounded-full"
                    :class="getTaskTypeClass(task.type)"
                  >
                    {{ getTaskTypeName(task.type) }}
                  </span>
                  <span class="text-sm text-gray-500"><i class="fa fa-map-marker mr-1"></i> {{ task.distance }}</span>
                </div>
                <h3 class="text-lg font-semibold mb-2">{{ task.title }}</h3>
                <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ task.description }}</p>
                <div class="flex justify-between items-center mb-4">
                  <div class="flex items-center">
                    <img 
                      :src="task.publisher.avatar" 
                      alt="发布者头像" 
                      class="h-8 w-8 rounded-full mr-2"
                    >
                    <span class="text-sm text-gray-700">{{ task.publisher.name }}</span>
                  </div>
                  <span class="text-accent font-bold">¥{{ task.reward }}</span>
                </div>
                <button 
                  class="w-full bg-primary text-white py-2 rounded-lg btn-hover"
                  @click="openTaskDetail(task.id)"
                >
                  查看详情
                </button>
              </div>
            </div>
          </div>
  
          <div class="mt-6 text-center">
            <button class="border border-primary text-primary px-6 py-2 rounded-lg btn-hover">
              加载更多
            </button>
          </div>
        </section>
  
        <!-- 进行中的订单 -->
        <section id="in-progress" class="mb-12">
          <h2 class="text-2xl font-bold text-dark mb-6">进行中的订单</h2>
  
          <!-- 进行中订单循环渲染 -->
          <div 
            class="bg-white rounded-lg overflow-hidden card-shadow mb-6"
            v-for="(order, index) in inProgressOrders"
            :key="order.id"
          >
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-lg font-semibold">
                    {{ order.title }} 
                    <span class="text-sm font-normal text-gray-500">#{{ order.orderNo }}</span>
                  </h3>
                  <p class="text-gray-600 text-sm mt-1">接单时间：{{ order.acceptTime }}</p>
                </div>
                <span 
                  class="text-xs px-2 py-1 rounded-full"
                  :class="getOrderStatusClass(order.status)"
                >
                  {{ getOrderStatusName(order.status) }}
                </span>
              </div>
  
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <h4 class="text-sm font-medium text-gray-500 mb-2">取件信息</h4>
                  <p class="text-gray-800"><i class="fa fa-map-marker text-primary mr-2"></i> {{ order.pickup.location }}</p>
                  <p class="text-gray-800 mt-1" v-if="order.pickup.phone">
                    <i class="fa fa-phone text-primary mr-2"></i> {{ order.pickup.phone }}
                  </p>
                  <p class="text-gray-800 mt-1" v-if="order.pickup.note">
                    <i class="fa fa-info-circle text-primary mr-2"></i> {{ order.pickup.note }}
                  </p>
                </div>
                <div>
                  <h4 class="text-sm font-medium text-gray-500 mb-2">送达信息</h4>
                  <p class="text-gray-800"><i class="fa fa-map-marker text-primary mr-2"></i> {{ order.delivery.location }}</p>
                  <p class="text-gray-800 mt-1">
                    <i class="fa fa-phone text-primary mr-2"></i> {{ order.delivery.contact }}
                  </p>
                  <p class="text-gray-800 mt-1" v-if="order.delivery.expectTime">
                    <i class="fa fa-clock-o text-primary mr-2"></i> 期望送达：{{ order.delivery.expectTime }}
                  </p>
                </div>
              </div>
  
              <div class="border-t pt-4 flex justify-between items-center">
                <div class="text-accent font-bold text-lg">¥{{ order.reward }}</div>
                <div class="flex space-x-3">
                  <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg btn-hover">
                    <i class="fa fa-comment mr-1"></i> 联系客户
                  </button>
                  <button 
                    class="bg-secondary text-white px-4 py-2 rounded-lg btn-hover"
                    :disabled="index === 1"
                  >
                    <i class="fa fa-check mr-1"></i> {{ order.nextStepText }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!-- 收益管理 -->
        <section id="earnings" class="mb-12">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-dark">收益管理</h2>
            <button class="bg-accent text-white px-4 py-2 rounded-lg btn-hover">
              <i class="fa fa-money mr-1"></i> 申请提现
            </button>
          </div>
  
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white rounded-lg p-6 card-shadow">
              <h3 class="text-gray-500 mb-2">今日收益</h3>
              <p class="text-3xl font-bold text-dark">¥{{ earnings.today }}</p>
              <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up mr-1"></i> 较昨日 +¥{{ earnings.todayGrowth }}</p>
            </div>
            <div class="bg-white rounded-lg p-6 card-shadow">
              <h3 class="text-gray-500 mb-2">本月收益</h3>
              <p class="text-3xl font-bold text-dark">¥{{ earnings.month }}</p>
              <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up mr-1"></i> 较上月 +¥{{ earnings.monthGrowth }}</p>
            </div>
            <div class="bg-white rounded-lg p-6 card-shadow">
              <h3 class="text-gray-500 mb-2">可提现金额</h3>
              <p class="text-3xl font-bold text-dark">¥{{ earnings.available }}</p>
              <p class="text-gray-500 text-sm mt-2">已满足提现门槛（≥¥500）</p>
            </div>
          </div>
  
          <div class="bg-white rounded-lg overflow-hidden card-shadow">
            <div class="p-6">
              <h3 class="text-lg font-semibold mb-4">收益明细</h3>
  
              <div class="overflow-x-auto">
                <table class="min-w-full">
                  <thead>
                    <tr class="border-b">
                      <th class="py-3 text-left text-sm font-medium text-gray-500">订单号</th>
                      <th class="py-3 text-left text-sm font-medium text-gray-500">任务</th>
                      <th class="py-3 text-left text-sm font-medium text-gray-500">日期</th>
                      <th class="py-3 text-left text-sm font-medium text-gray-500">金额</th>
                      <th class="py-3 text-left text-sm font-medium text-gray-500">状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr 
                      class="border-b hover:bg-gray-50"
                      v-for="detail in earningsDetails"
                      :key="detail.id"
                    >
                      <td class="py-                    3 text-sm text-gray-700">{{ detail.orderNo }}</td>
                    <td class="py-3 text-sm text-gray-700">{{ detail.task }}</td>
                    <td class="py-3 text-sm text-gray-700">{{ detail.date }}</td>
                    <td class="py-3 text-sm text-accent font-medium">¥{{ detail.amount }}</td>
                    <td class="py-3 text-sm">
                      <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">
                        {{ detail.status }}
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="mt-6 text-center">
              <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg btn-hover">
                查看更多
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 任务详情模态框 -->
    <div 
      class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center"
      :class="{ hidden: !showTaskModal }"
      @click.self="closeTaskModal"
    >
      <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b">
          <div class="flex justify-between items-center">
            <h3 class="text-xl font-bold text-dark">任务详情</h3>
            <button 
              class="text-gray-500 hover:text-gray-700"
              @click="closeTaskModal"
            >
              <i class="fa fa-times text-xl"></i>
            </button>
          </div>
        </div>

        <div class="p-6" v-if="currentTask">
          <div class="flex justify-between items-start mb-4">
            <span 
              class="text-xs px-2 py-1 rounded-full"
              :class="getTaskTypeClass(currentTask.type)"
            >
              {{ getTaskTypeName(currentTask.type) }}
            </span>
            <span class="text-sm text-gray-500">
              <i class="fa fa-map-marker mr-1"></i> {{ currentTask.distance }}
            </span>
          </div>

          <h3 class="text-xl font-semibold mb-4">{{ currentTask.title }}</h3>

          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 mb-2">任务描述</h4>
            <p class="text-gray-800">{{ currentTask.description }}</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-2">取件信息</h4>
              <p class="text-gray-800">
                <i class="fa fa-map-marker text-primary mr-2"></i> {{ currentTask.pickup.location }}
              </p>
              <p class="text-gray-800 mt-1">
                <i class="fa fa-phone text-primary mr-2"></i> {{ currentTask.pickup.phone }}
              </p>
              <p class="text-gray-800 mt-1">
                <i class="fa fa-clock-o text-primary mr-2"></i> {{ currentTask.pickup.time }}
              </p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500 mb-2">送达信息</h4>
              <p class="text-gray-800">
                <i class="fa fa-map-marker text-primary mr-2"></i> {{ currentTask.delivery.location }}
              </p>
              <p class="text-gray-800 mt-1">
                <i class="fa fa-phone text-primary mr-2"></i> {{ currentTask.delivery.contact }}
              </p>
              <p class="text-gray-800 mt-1">
                <i class="fa fa-clock-o text-primary mr-2"></i> {{ currentTask.delivery.time }}
              </p>
            </div>
          </div>

          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 mb-2">发布者信息</h4>
            <div class="flex items-center">
              <img 
                :src="currentTask.publisher.avatar" 
                alt="发布者头像" 
                class="h-10 w-10 rounded-full mr-3"
              >
              <div>
                <p class="text-gray-800 font-medium">{{ currentTask.publisher.name }}</p>
                <div class="flex items-center mt-1">
                  <div class="flex">
                    <i class="fa fa-star text-yellow-400"></i>
                    <i class="fa fa-star text-yellow-400"></i>
                    <i class="fa fa-star text-yellow-400"></i>
                    <i class="fa fa-star text-yellow-400"></i>
                    <i class="fa fa-star text-yellow-400"></i>
                  </div>
                  <span class="text-gray-500 text-sm ml-2">
                    {{ currentTask.publisher.rating }} ({{ currentTask.publisher.reviewCount }}条评价)
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="border-t pt-6 flex justify-between items-center">
            <div class="text-accent font-bold text-2xl">¥{{ currentTask.reward }}</div>
            <button 
              class="bg-primary text-white px-6 py-3 rounded-lg btn-hover"
              @click="acceptTask"
            >
              <i class="fa fa-check mr-2"></i> 接受任务
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 接单成功提示 -->
    <div 
      class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 hidden flex items-center"
      :class="{ hidden: !showSuccessToast }"
    >
      <i class="fa fa-check-circle mr-2 text-xl"></i>
      <span>接单成功！任务已加入您的进行中列表</span>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <div class="flex items-center mb-4">
              <i class="fa fa-bolt text-primary text-2xl mr-2"></i>
              <h3 class="text-xl font-bold">校园跑腿</h3>
            </div>
            <p class="text-gray-400 text-sm">专业的同城跑腿服务平台，为您提供高效、快捷、安全的跑腿服务。</p>
          </div>
          <div>
            <h4 class="text-lg font-semibold mb-4">快速链接</h4>
            <ul class="space-y-2 text-gray-400">
              <li><a href="#" class="hover:text-primary transition">关于我们</a></li>
              <li><a href="#" class="hover:text-primary transition">服务条款</a></li>
              <li><a href="#" class="hover:text-primary transition">隐私政策</a></li>
              <li><a href="#" class="hover:text-primary transition">帮助中心</a></li>
            </ul>
          </div>
          <div>
            <h4 class="text-lg font-semibold mb-4">联系我们</h4>
            <ul class="space-y-2 text-gray-400">
              <li><i class="fa fa-phone mr-2"></i> 400-123-4567</li>
              <li><i class="fa fa-envelope mr-2"></i> support@sandian.com</li>
              <li><i class="fa fa-map-marker mr-2"></i> 北京市朝阳区XX大厦</li>
            </ul>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
          &copy; 2023 校园跑腿 版权所有
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'RunnerWorkbench',
  data() {
    return {
      // 菜单状态
      showMobileMenu: false,
      showProfileMenu: false,
      showFilterPanel: false,
      
      // 模态框状态
      showTaskModal: false,
      showSuccessToast: false,
      
      // 当前选中的任务
      currentTask: null,
      
      // 筛选条件
      filter: {
        taskType: '',
        distance: '',
        sortBy: 'default'
      },
      
      // 任务数据
      tasks: [
        {
          id: 1,
          type: 'food',
          distance: '1.2公里',
          title: '帮忙取餐并送到公司',
          description: '麻烦帮我从XX餐厅取一份外卖，送到XX大厦15楼，谢谢！',
          reward: 15,
          publisher: {
            name: '李女士',
            avatar: 'https://picsum.photos/id/237/32/32'
          },
          pickup: {
            location: 'XX餐厅（downtown店）',
            phone: '138****5678',
            time: '可随时取餐'
          },
          delivery: {
            location: 'XX大厦15楼 市场部',
            contact: '139****1234（李女士）',
            time: '今天12:00前'
          }
        },
        {
          id: 2,
          type: 'express',
          distance: '0.8公里',
          title: '取快递并送到家',
          description: '帮我去小区门口快递柜取个快递，送到3号楼2单元501，取件码123456',
          reward: 10,
          publisher: {
            name: '王先生',
            avatar: 'https://picsum.photos/id/177/32/32'
          },
          pickup: {
            location: 'XX小区门口 快递柜',
            phone: '137****8901',
            time: '上午10点后',
            note: '取件码：123456'
          },
          delivery: {
            location: 'XX小区3号楼2单元501',
            contact: '136****7890（王先生）',
            time: '今天下午5点前'
          }
        },
        {
          id: 3,
          type: 'shopping',
          distance: '2.5公里',
          title: '帮忙买几样东西',
          description: '麻烦去超市帮我买些日用品，清单如下：牙膏、牙刷、洗发水，送到XX小区',
          reward: 20,
          publisher: {
            name: '张女士',
            avatar: 'https://picsum.photos/id/337/32/32'
          },
          pickup: {
            location: 'XX超市',
            phone: '135****2345',
            time: '下午2点后'
          },
          delivery: {
            location: 'XX小区5号楼1单元302',
            contact: '134****6789（张女士）',
            time: '今天晚上7点前'
          }
        }
      ],
      
      // 进行中的订单
      inProgressOrders: [
        {
          id: 1,
          orderNo: 'ORD87654',
          title: '取餐送公司',
          acceptTime: '2023-06-15 10:23',
          status: 'pending_pickup',
          nextStepText: '已取件',
          reward: 15,
          pickup: {
            location: 'XX餐厅（downtown店）',
            phone: '138****5678',
            note: '取餐号：A1234'
          },
          delivery: {
            location: 'XX大厦15楼 市场部',
            contact: '139****1234（李女士）',
            expectTime: '今天12:00前'
          }
        },
        {
          id: 2,
          orderNo: 'ORD87653',
          title: '取快递送家',
          acceptTime: '2023-06-15 09:15',
          status: 'picked_up',
          nextStepText: '已送达',
          reward: 10,
          pickup: {
            location: 'XX小区门口 快递柜',
            note: '取件码：123456'
          },
          delivery: {
            location: 'XX小区3号楼2单元501',
            contact: '136****7890（王先生）'
          }
        }
      ],
      
      // 收益数据
      earnings: {
        today: 25.00,
        todayGrowth: 10,
        month: 865.00,
        monthGrowth: 120,
        available: 650.00
      },
      
      // 收益明细
      earningsDetails: [
        {
          id: 1,
          orderNo: 'ORD87652',
          task: '超市代购',
          date: '2023-06-14',
          amount: 20.00,
          status: '已到账'
        },
        {
          id: 2,
          orderNo: 'ORD87645',
          task: '文件送达',
          date: '2023-06-14',
          amount: 15.00,
          status: '已到账'
        },
        {
          id: 3,
          orderNo: 'ORD87630',
          task: '取餐服务',
          date: '2023-06-13',
          amount: 12.00,
          status: '已到账'
        }
      ]
    };
  },
  methods: {
    // 切换移动端菜单
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu;
    },
    
    // 切换个人资料菜单
    toggleProfileMenu() {
      this.showProfileMenu = !this.showProfileMenu;
    },
    
    // 切换筛选面板
    toggleFilterPanel() {
      this.showFilterPanel = !this.showFilterPanel;
    },
    
    // 重置筛选条件
    resetFilter() {
      this.filter = {
        taskType: '',
        distance: '',
        sortBy: 'default'
      };
    },
    
    // 打开任务详情
    openTaskDetail(taskId) {
      const task = this.tasks.find(item => item.id === taskId);
      if (task) {
        // 补充发布者评分信息
        const publisherRatings = {
          1: { rating: 5.0, reviewCount: 120 },
          2: { rating: 4.8, reviewCount: 86 },
          3: { rating: 4.9, reviewCount: 152 }
        };
        
        this.currentTask = {
          ...task,
          publisher: {
            ...task.publisher,
            ...publisherRatings[taskId]
          }
        };
        this.showTaskModal = true;
        document.body.style.overflow = 'hidden';
      }
    },
    
    // 关闭任务详情
    closeTaskModal() {
      this.showTaskModal = false;
      this.currentTask = null;
      document.body.style.overflow = '';
    },
    
    // 接受任务
    acceptTask() {
      this.closeTaskModal();
      
      // 显示成功提示
      this.showSuccessToast = true;
      
      // 3秒后隐藏提示
      setTimeout(() => {
        this.showSuccessToast = false;
      }, 3000);
    },
    
    // 处理移动端导航点击
    handleMobileNavClick(sectionId) {
      this.scrollToSection(sectionId);
      this.showMobileMenu = false;
    },
    
    // 滚动到指定区域
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (        element) {
        window.scrollTo({
          top: element.offsetTop - 80, // 考虑导航栏高度
          behavior: 'smooth'
        });
      }
    },
    
    // 获取任务类型显示名称
    getTaskTypeName(type) {
      const typeMap = {
        'food': '美食外卖',
        'express': '快递代取',
        'shopping': '代购商品',
        'other': '其他任务'
      };
      return typeMap[type] || '未知类型';
    },
    
    // 获取任务类型样式类
    getTaskTypeClass(type) {
      const classMap = {
        'food': 'bg-blue-100 text-primary',
        'express': 'bg-green-100 text-green-600',
        'shopping': 'bg-purple-100 text-purple-600',
        'other': 'bg-gray-100 text-gray-600'
      };
      return classMap[type] || 'bg-gray-100 text-gray-600';
    },
    
    // 获取订单状态显示名称
    getOrderStatusName(status) {
      const statusMap = {
        'pending_pickup': '待取件',
        'picked_up': '已取件',
        'delivered': '已送达',
        'completed': '已完成'
      };
      return statusMap[status] || '未知状态';
    },
    
    // 获取订单状态样式类
    getOrderStatusClass(status) {
      const classMap = {
        'pending_pickup': 'bg-yellow-100 text-yellow-600',
        'picked_up': 'bg-blue-100 text-blue-600',
        'delivered': 'bg-green-100 text-green-600',
        'completed': 'bg-gray-100 text-gray-600'
      };
      return classMap[status] || 'bg-gray-100 text-gray-600';
    }
  }
};
</script>

<style scoped>
/* 引入外部资源 */
@import "https://cdn.tailwindcss.com";
@import "https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css";

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .btn-hover {
    transition: all 0.3s ease;
  }
  .btn-hover:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}

/* 自定义颜色配置会通过Tailwind的配置系统在实际项目中设置 */
/* 这里仅作为示意，实际使用时应在tailwind.config.js中配置 */
:root {
  --primary: #3B82F6;
  --secondary: #10B981;
  --accent: #F59E0B;
  --danger: #EF4444;
  --dark: #1F2937;
}
</style>